import { Work } from '../types';

interface WorkCardProps {
  work: Work;
}

const WorkCard = ({ work }: WorkCardProps) => {
  const cardStyle: React.CSSProperties = {
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '1rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'column',
  };

  const imageStyle: React.CSSProperties = {
    width: '100%',
    height: '200px',
    objectFit: 'cover',
    borderRadius: '4px',
    backgroundColor: '#eee',
  };

  return (
    <div style={cardStyle}>
      <img src={work.thumbnailUrl} alt={work.title} style={imageStyle} />
      <h3 style={{ marginTop: '1rem', marginBottom: '0.25rem' }}>{work.title}</h3>
      <p style={{ fontSize: '0.9rem', color: '#666', flexGrow: 1 }}>{work.description}</p>
      <small style={{ color: '#888', textAlign: 'right', marginTop: '1rem' }}>- {work.team.name}</small>
    </div>
  );
};

export default WorkCard;